<template>
  <div style="width: 1200px;margin: 60px auto">


    <!--        展示所有的分类-->
    <div style="margin: 100px 30px">

      <div v-for="i in categoryArr1">
        <div style="margin: 30px 0 20px;">
          <h2 style="font-size: 20px;
    color: #333;
    line-height: 20px;
    font-weight: bold;">{{ i.name }}</h2>
        </div>

        <div v-for="j in categoryArr2" v-if="j.parentId===i.id">
          <div style="">
            <h3 style="font-size: 16px;
    color: #333;
    line-height: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 15px;">{{ j.name }}</h3>
          </div>
          <div v-for="k in categoryArr3" v-if="k.parentId===j.id"
               style="display: inline;margin: 10px 20px;width: 100px;height: 30px">
            <a @click="searchRecipe(k.name)">{{ k.name }}</a>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>

export default {
  data() {
    return {
      $: "",
      handleSelect(key, keyPath) {
        //key就是菜单项的index值 keyPath代表点击的菜单项完整路径
        console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      activeIndex: '1',
      activeIndex2: '1',

      categoryArr1: [],
      categoryArr2: [],
      categoryArr3: [],

    }

  },
  methods: {

    loadFirstCategoryList() {
      let url = 'http://localhost:8889/category/list/first';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.categoryArr1 = jsonResult.data;

        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadSecondCategoryList() {
      let url = 'http://localhost:8889/category/list/second';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.categoryArr2 = jsonResult.data;

        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadThirdCategoryList() {
      let url = 'http://localhost:8889/category/list/third';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.categoryArr3 = jsonResult.data;

        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    searchRecipe(name){
      this.$router.replace('/');
      this.$router.push("recipe/search?keyword="+name);
    },
  },
  mounted() {
    //加载所有的分类
    this.loadFirstCategoryList();
    this.loadSecondCategoryList();
    this.loadThirdCategoryList();
  }
}

</script>

<style>
* {
  margin: 0;
  padding: 0
}

a:hover {
  cursor: pointer;
  color: orange;
  text-decoration: none
}

.el-menu--horizontal > .el-menu-item, .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 49px;
  line-height: 70px;
}

.el-menu-item, .el-submenu__title {
  padding: 0 15px;
}

.el-button {
  padding: 8px 12px;
}

.el-input__inner {
  height: 30px;
  line-height: 20px;
}


#index_main {
  margin: 0 auto
}

.el-card__body, .el-main {
  padding: 0;
}

/*#index_footer{height: 398px;background-color: #e8e8e8}*/

.dailyRecipe .title {
  font-size: 15px;
  line-height: 35px
}

.dailyRecipe .author {
  font-size: 12px;
  line-height: 13px
}

.othersSearch_topic span {
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 24px;
  font-size: 12px;
  margin: 12px;
}

.othersSearch_topic span:hover {
  color: orange;
  border: orange 1px solid;
}

.el-aside .follow span {
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 12px;
  margin: 12px;
}

.el-aside .follow span:hover {
  color: orange;
  border: orange 1px solid;
}

.follow_author {
  font-size: 15px;
}

.follow_fans {
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}

element.style {
  padding: 0;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.el-main {
  padding: 0 !important;
}

.el-submenu__title {
  padding: 0 5px !important;
}

.el-dropdown-menu__item, .el-menu-item {
  padding: 0 10px !important;
}

.page-scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>


